<template>
  <q-dialog class="my-dialog-form" v-model="isFlagShow">
    <q-card class="my-card q-mx-lg">
      <q-toolbar class="row items-center my-form-header">
        <div>
          {{dlgTitle}}
        </div>
        <q-space />
        <q-btn flat round dense icon="mdi-close" @click="close"/>
      </q-toolbar>
      <q-separator />
      <q-card-setion class="q-mx-sm">
        <div class="text-center"
             v-show="(message.operationType === EnumEventOperationType.OPERATION_PLAY_VIDEO)"
        >
          <video
            ref="myVideoRef"
            :src="message.url"
             autoplay="true"
             width="580"
             height="300"
             controls
          />
        </div>
        <div class="text-center"
             v-show="(message.operationType === EnumEventOperationType.OPERATION_PLAY_AUDIO)"
        >
          <audio
            ref="myAudioRef"
            :src="message.url"
             autoplay="true"
             width="580"
             height="300"
             controls
          />
        </div>
      </q-card-setion>
      <q-separator />
      <div class="q-gutter-sm my-form-footer">
        <q-btn
          unelevated
          dense
          label="关闭"
          type="submit"
          color="teal-3"
          @click="close"
          style="width: 80px"
        />
      </div>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref, toRefs, watch } from 'vue';
import { CEventMsgItem } from 'src/stores/editorModels';
import { EnumEventOperationType } from 'src/util/SelectBoxOption';

export default defineComponent({
  name: 'ShowMsgDlg',
  props: {
    message: {
      type: Object as PropType<CEventMsgItem>,
      required: true
    }
  },
  emits: [],
  setup (props, context) {
    //数据解构
    const {
      message
    } = toRefs(props);


    //*******************************
    //      表单项
    //*******************************
    //窗口显示
    let isFlagShow = ref(false);

    //窗口标题
    let dlgTitle = ref('');

    //ref
    let myVideoRef = ref<HTMLVideoElement|null>(null);
    let myAudioRef = ref<HTMLAudioElement|null>(null);

    //关闭窗口
    const close = () => {
      isFlagShow.value = false;
    }

    //显示窗口
    const show = (text: string) => {
      isFlagShow.value = true;
      dlgTitle.value = text;
    }

    //*******************************
    //      启动模块
    //*******************************
    //初始化
    const init = () => {
      if (message.value.operationType === EnumEventOperationType.OPERATION_PLAY_VIDEO) {
        myAudioRef.value?.pause();
      } else if (message.value.operationType === EnumEventOperationType.OPERATION_PLAY_AUDIO) {
        myVideoRef.value?.pause();
      }
    }

    //监听对象的所有属性
    watch(() => message, () => {
      init();
    }, { deep: true });

    //启动挂载组件
    onMounted(() => {
      init();
    })

    return {
      message,
      isFlagShow,
      dlgTitle,
      myVideoRef,
      myAudioRef,

      init,
      close,
      show,

      EnumEventOperationType
    }
  }
})
</script>

<style lang="scss" scoped>
  .my-card {
    alignment: center;
    width: 600px;
    max-width: 800px;

    .my-form-container {
      text-align: center;
      padding: 5px 50px 5px 50px;
      height: 350px;
    }
  }

</style>
